<template>
		<div class="searchList">
			<ul>
				<li v-for='item in searchSongs' class="list">
					<!-- <img src="https://y.gtimg.cn/mediastyle/mobile/yqq_v5/img/search_sprite.png"> -->
					<i class="icon"></i>
					<div class="title">
						<p class="name">{{item.name}}</p>
						<p class="singer">{{item.singer}}</p>
					</div>
				</li>
			</ul>
		</div>
</template>

<script>
	export default {
		props:[
			'searchSongs'
		]
	}
</script>

<style scoped lang='less'>
@import '~assets/less/variable';	
	.list{
		height:55px;
		width:100%;
		padding-left: 55px;
		position: relative;
		.icon{
			position: absolute;
			display: inline-block;
			left:16px;
			top:17px;
			width: 22px;
			height: 20px;
			background: url('https://y.gtimg.cn/mediastyle/mobile/yqq_v5/img/search_sprite.png') no-repeat;
			background-size: 100% 100%;
		}
		.title{
			height: 100%;
			width: 100%;
			display: flex;
			flex-wrap:wrap;
			align-items:center;
			.name{
				width:100%;
				font-size: @font-size-medium-x;
			}
			.singer{
				width: 100%;
				font-size: @font-size-small;
				color:@color-text-d;
			}
		}
	}
</style>